<template>
	<view class="gengduo pageBg">
		<view class="box">
			<view class="box-item slide-left" :class="{ 'animate': showAnimation }" style="background-color: #eaffd0;">
				<view class="card-content">
					<text class="card-title">所有成员填写记录</text>
					<button class="card-btn" @click="goToAllRepairList">点击浏览</button>
				</view>
			</view>
			<view class="box-item slide-right" :class="{ 'animate': showAnimation }" style="background-color: #95e1d3;">
				<view class="card-content">
					<text class="card-title">成员报修处理排行榜👑</text>
					<button class="card-btn" @click="goToRanking">点击查看</button>
				</view>
			</view>
			<view class="box-item slide-left" :class="{ 'animate': showAnimation }" style="background-color: #fce38a;">
				<view class="card-content">
					<text class="card-title">没事背点单词吧！</text>
					<button class="card-btn" @click="goToDanci">点击进入</button>
				</view>
			</view>
			<view class="box-item slide-right" :class="{ 'animate': showAnimation }" style="background-color: #f38181;">
				<view class="card-content">
					<text class="card-title">待开发......</text>
					<button class="card-btn">点击查看</button>
				</view>
			</view>
		</view>
		<image class="img" src="https://www.pengfei.site:8443/image/youlun.gif" mode="aspectFill"></image>
	</view>
</template>

<script setup>
	import {
		onPageHide,
		onPageShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'

	// 动画控制（参考 user.vue）
	const showAnimation = ref(false)

	onPageShow(() => {
		showAnimation.value = true
	})

	onPageHide(() => {
		showAnimation.value = false
	})

	// 跳转到全部填写记录页面
	const goToAllRepairList = () => {
		uni.navigateTo({
			url: '/pages/gengduo/components/tianxieList/tianxieList?type=all'
		})
	}

	// 跳转到背单词页面
	const goToDanci = () => {
		uni.navigateTo({
			url: '/pages/gengduo/components/danci/danci'
		})
	}

	// 跳转到排行榜页面
	const goToRanking = () => {
		uni.navigateTo({
			url: '/pages/gengduo/components/paihangbang/paihangbang'
		})
	}
</script>

<style lang="scss" scoped>
	.img {
		position: fixed;
		bottom: 0;
		right: 0;
		width: 600rpx;
		height: 400rpx;
	}

	.box {
		padding: 100rpx 20rpx;

		.box-item {
			width: 100%;
			height: 200rpx;
			margin: 20rpx 0;
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
			backdrop-filter: blur(10rpx);
			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15), 
			           0 2rpx 8rpx rgba(0, 0, 0, 0.1),
			           inset 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
			border-radius: 24rpx;
			border: 1rpx solid rgba(255, 255, 255, 0.3);
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			overflow: hidden;
			transition: all 0.3s ease;
			
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
				pointer-events: none;
			}
			
			&:hover {
				transform: translateY(-4rpx);
				box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.2), 
				           0 4rpx 12rpx rgba(0, 0, 0, 0.15),
				           inset 0 1rpx 2rpx rgba(255, 255, 255, 0.9);
			}

			.card-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				.card-title {
					font-size: 40rpx;
					font-weight: bold;
					color: #333333;
					text-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.1);
					letter-spacing: 2rpx;
					position: relative;
					filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
				}

				.card-btn {
					background: linear-gradient(135deg, #00d4aa 0%, #00b4d8 50%, #0077b6 100%);
					background-size: 200% 200%;
					color: white;
					border: none;
					border-radius: 32rpx;
					box-shadow: 0 8rpx 20rpx rgba(0, 180, 216, 0.4), 
					           inset 0 2rpx 4rpx rgba(255, 255, 255, 0.2),
					           0 0 20rpx rgba(0, 180, 216, 0.2);
					font-size: 28rpx;
					font-weight: bold;
					padding: 12rpx 56rpx;
					letter-spacing: 1rpx;
					position: relative;
					overflow: hidden;
					transition: all 0.3s ease;
					animation: gradientShift 4s ease-in-out infinite, buttonPulse 2s ease-in-out infinite;
					text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
					
					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: -100%;
						width: 100%;
						height: 100%;
						background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
						transition: left 0.5s ease;
					}
					
					&::after {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						width: 0;
						height: 0;
						background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
						border-radius: 50%;
						transform: translate(-50%, -50%);
						transition: all 0.3s ease;
					}
					
					&:hover {
						transform: translateY(-2rpx) scale(1.05);
						box-shadow: 0 12rpx 28rpx rgba(0, 180, 216, 0.5), 
						           inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
						           0 0 30rpx rgba(0, 180, 216, 0.3);
						
						&::before {
							left: 100%;
						}
						
						&::after {
							width: 100rpx;
							height: 100rpx;
						}
					}
					
					&:active {
						transform: translateY(1rpx) scale(0.98);
						box-shadow: 0 4rpx 12rpx rgba(0, 180, 216, 0.3);
					}
				}
			}
		}
	}

	/* 进场动画（参考 user.vue） */
	.slide-left {
		transform: translateX(-100%);
		opacity: 0;
		transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.slide-left.animate {
		transform: translateX(0);
		opacity: 1;
	}

	.slide-right {
		transform: translateX(100%);
		opacity: 0;
		transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.slide-right.animate {
		transform: translateX(0);
		opacity: 1;
	}

	/* 艺术字动画效果 */
	@keyframes gradientShift {
		0%, 100% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
	}

	@keyframes shimmer {
		0%, 100% {
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
	}

	@keyframes buttonPulse {
		0%, 100% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.02);
		}
	}
</style>